<template>
  <div id="index">
    <el-table :data="list"
              :show-header="false">
      <el-table-column align="left">
        <template slot="header" slot-scope="scope">
          排序：默认
        </template>
        <template slot-scope="scope">
          <i class="el-icon-third-recomment2" v-if="scope.row.isTop === 1"></i>
          <dl>
            <router-link :key="scope.row.id" :title="scope.row.title"
                         :to="{name: 'article', params: {id:scope.row.id}}">
              <dt><span class="label">{{scope.row.categoryName}}</span><span class="f-14">{{scope.row.title}}</span>
              </dt>
              <dd class="desc opacity-8">{{scope.row.introduction}}</dd>
            </router-link>
            <dd class="opacity-5 mt-5">
              <span class="mr-10"><i class="el-icon-time mr-2"></i>{{scope.row.formatTime}}</span>
              <span class="mr-10"><i class="el-icon-view mr-2"></i>{{scope.row.readingNum}} 浏览</span>
              <span><i class="el-icon-chat-dot-round mr-2"></i>{{scope.row.commentNum}} 评论</span>
            </dd>
          </dl>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        small
        background
        hide-on-single-page="true"
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page="this.pagination.page"
        :page-size="this.pagination.size"
        :total="this.pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

  export default {
    name: "index.vue",
    watch: {
      "$route": "reload"
    },
    data() {
      return {
        list: [],
        pagination: {
          page: 1,
          size: 10,
          total: 0,
        },
      }
    },
    methods: {
      async getArticleList() {
        let data = {
          page: this.pagination.page,
        }

        const loading = this.openLoading();
        // let res = await this.$api.articleList(this.$common.filterParam(data))
        let res = {"list":[{"id":134,"title":"Golang 类型断言 x.(T) 以及 type switch 结构","introduction":"Golang作为强类型语言，数据转换也很频繁，很多地方也都通过 interface{} 接口实现，所以类型断言也就尤为重要。| 类型断言我们可以通过 x.(T) 直接实现类型值的转回。x.(T) 直接将 x 实例的值转回 T 类型，其中 x 必须是接口值，T 必须是 x 接口实例存放的类型实例。同类型的值类型实例和指针类型实例不能互转，不同类型更不能互转，否则 panic 终止程序运行。t := make(map[string]interface{})\nt[\"nickname\"] = \"bzin","commentNum":0,"readingNum":8,"image":"","isTop":0,"publishTime":1608106141,"categoryId":8,"categoryName":"Golang","formatTime":"1星期前"},{"id":133,"title":"websocket 通信 Uncaught (in promise) DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.","introduction":"问题描述vue 建立 websocket 连接后，send 发送数据报错：Uncaught (in promise) DOMException: Failed to execute \u0026#39;send\u0026#39; on \u0026#39;WebSocket\u0026#39;: Still in CONNECTING state.场景描述正常建立 websocket 连接后，send 发送消息，服务器端接收到通知，是没问题的。但是当某种情况下，连接关闭了，之后触发了 send 操作。因为我想在 send 的时候如果","commentNum":0,"readingNum":10,"image":"","isTop":0,"publishTime":1607486180,"categoryId":12,"categoryName":"前端","formatTime":"2星期前"},{"id":132,"title":"Vue 路由跳转页面不置顶","introduction":"今天发现博客路由跳转的时候页面不置顶，于是查了下网上的方法，大致就是以下两种方式，可是都不生效。万念俱灰 ...| router.jsrouter.js 中 new VueRouter 的时候添加 scrollBehavior const router = new VueRouter({\n  mode: \u0026#39;history\u0026#39;,\n  routes,\n  scrollBehavior(to, from, saveTop) {\n    if (saveTop) {\n      retur","commentNum":0,"readingNum":8,"image":"","isTop":0,"publishTime":1607316190,"categoryId":12,"categoryName":"前端","formatTime":"3星期前"},{"id":88,"title":"Vue 权限验证(动态路由)","introduction":"权限验证无非就两种方式：前端控制权限，后端控制权限。前端控制权限的话一般全是静态路由，添加和修改不方便，也不安全。后端控制的话就比较理想了，后台管理系统一般都有添加路由规则的入口，根据不同用户组返回该用户拥有的权限给前端，这里我们着重讲后端控制权限。代码仅供参考，自己根据实际情况修改。| 前置知识点vuex| 初始化路由路由这块就不多说了，都开始做权限控制了肯定对路由的配置有了一定的了解了。我们在router目录下新建了routes.js用来存放我们的静态路由：// @/router/route","commentNum":0,"readingNum":17,"image":"","isTop":0,"publishTime":1605752680,"categoryId":12,"categoryName":"前端","formatTime":"1个月前"},{"id":131,"title":"PHPStorm Yaf框架代码追踪和提示","introduction":"在phpstorm中使用yaf框架的时候，yaf框架的类都无法追踪，并且调用相关类也没有提示。使用起来相当痛苦，并且看起来难受，鼠标放上去都是Undefined Class xxx。我们只需要在配置中修改下就行了：PHPStorm -\u003e Preferences -\u003e Languages \u0026 Frameworks -\u003e PHPPHP language level选择本地安装的PHP的版本。CLI Interpreter选择对应版本的php的路径，没有就点...，再点+添加，选择对应版本php就行了","commentNum":0,"readingNum":15,"image":"","isTop":0,"publishTime":1605692766,"categoryId":13,"categoryName":"其他","formatTime":"1个月前"},{"id":130,"title":"Vue 首次加载很慢，vendor文件过大优化","introduction":"重构这个博客时用的是 vue+elementui 做前端开发的。打包上线后打开网站发现加载超级慢，首次加载了几十秒种，发现vendor.js有好几兆，app.css也有一兆多。即使再次刷新也要十几秒，这种情况肯定是无法接受的，然后了解了下。问题原因？1、vue会优先加载vendor.js和app.css，渲染完整个页面才显示。2、vue会首次加载所有的资源，如果项目复杂，时间肯定长了。优化思路？1、减小vendor.js和app.css体积。2、按需加载。优化方案？1、cdn加载第三方包对于vu","commentNum":0,"readingNum":19,"image":"","isTop":0,"publishTime":1605609349,"categoryId":12,"categoryName":"前端","formatTime":"1个月前"},{"id":129,"title":"Webstorm 2020 永久激活破解","introduction":"以前使用JetBrains的时候都是直接通过 http://idea.lanyus.com 获取注册码激活，但是后来不允许使用了，现在需要破解激活了。如果在https下请求，会出现安全拦截情况，可选择保留，因为上传的七牛云现在https收费，所以就用的http。激活破解文件先放出来：Webstorm 2020.1 破解激活.zip接下来我们来说明破解方法：1、解压打开文件下lib文件夹，获取 jetbrains-agent.jar。2、启动IDE，这时需要激活，我们选择试用（Evaluate f","commentNum":2,"readingNum":1101,"image":"","isTop":0,"publishTime":1604973483,"categoryId":13,"categoryName":"其他","formatTime":"1个月前"},{"id":111,"title":"HTML 标签\u003ctextarea\u003e内容原样输出","introduction":"使用css white-space属性，可以使标签内容的空白符原样输出。white-space:pre-wrap  保留空白符序列，但是正常地进行换行。white-space:pre-line  合并空白符序列，但是保留换行符。{{ item.content }}\n\n\n\n.pre {\n    white-space: pre-wrap;       /* css-3 */\n    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */\n   ","commentNum":0,"readingNum":17,"image":"","isTop":0,"publishTime":1604394303,"categoryId":12,"categoryName":"前端","formatTime":"1个月前"},{"id":128,"title":"诡异现象 只有一个接口出现跨域问题","introduction":"今天突然出现某个接口失败，netwaork直接failed，console报错说是跨域问题，我瞬间懵了。其他接口好好的，这个接口咋突然跨域了，之前还没这个问题啊。network all 发现post请求之前也调用了options，并且返回204没问题。然后就是各种找，我是后端中间件做access控制的，肯定是没毛病的，不然所有接口肯定都跨域才对。网上各种搜，也没啥用，都试了也治不了我这个毛病。再就是这个接口这两天的确做了修改，新增了百度IP定位。那我就从这里下手，发现百度接口超配额了，获取不到返","commentNum":0,"readingNum":111,"image":"","isTop":0,"publishTime":1602666924,"categoryId":13,"categoryName":"其他","formatTime":"2个月前"},{"id":127,"title":"Dokcer  Error response from daemon: pull access denied for xxx, repository does not exist or may require 'docker login'","introduction":"今天重构某个docker容器的时候出现了这个问题，我就纳闷了，没干嘛咋docker build就不行了呢？Error response from daemon: pull access denied for xxx, repository does not exist or may require \u0026#39;docker login\u0026#39;看内容说是镜像不存在，pull被拒绝了，可能要登录。没多想，找了半天的账号登录了，发现还是这个问题。后来仔细研究了下，这个报错的意思是没有找到要拉取的镜像，","commentNum":0,"readingNum":117,"image":"","isTop":0,"publishTime":1602645275,"categoryId":13,"categoryName":"其他","formatTime":"2个月前"}],"pagination":{"page":1,"size":10,"total":20}}
        loading.close();

        this.list = res.list
        this.pagination = res.pagination
      },
      handleCurrentChange(val) {
        this.pagination.page = val
        this.$router.push({path: '/index', query: {page: val}})
      },
      reload() {
        if (this.$route.query.page !== undefined) {
          this.pagination.page = this.$route.query.page
        } else {
          this.pagination.page = 1
        }
        this.getArticleList()
      }
    },
    mounted() {
      this.reload()
    }
  }
</script>

<style scoped>

  dl {
    padding: 0 10px;
  }

  dt {
    color: #428BD1;
    line-height: 22px;
  }

  dd {
    margin: 0;
    line-height: 22px;
  }

  dl a {
    font-weight: 500;
  }

  .label {
    line-height: 25px;
    margin-right: 5px;
    padding: 1px 5px;
    color: #fff;
    background: #d9534f;
  }

  .el-table thead tr th {
    padding: 6px 10px !important;
  }

  .el-icon-third-recomment2 {
    position: absolute;
    right: 0;
    top: 14px;
    color: #d9534f;
  }

  .el-icon-third-recomment2:before {
    font-size: 28px;
  }

</style>
